<template>
  <!-- 可以使用of 来代替in v-for 可以遍历对象和数组 -->
  <div class="list-demo">
    <h3>------------------</h3>
    <h3>列表渲染</h3>
    <div>
      <p v-for="item in names" :key="item.id">{{ item }}</p>
    </div>
    <div v-for="item of results" :key="item.id">
      <p>{{ item.title }}</p>
      <img :src="item.avator" alt="" />
    </div>
    <div>
      <p v-for="(value, key, index) of userInfo" :key="key">
        {{ value }} -{{ key }}-{{ index }}
      </p>
    </div>
  </div>
</template>


<script>
export default {
  name: "ListRenderDemo",
  data() {
    return {
      flag: true,
      names: ["百度", "阿里", "腾讯", "字节跳动"],
      results: [
        {
          id: 2261677,
          title:
            "鄂尔多斯|感受一座城市的璀璨夜景感受一座城市，除了白日里的车水马龙，喧嚣繁华之",
          avator: "https://pic.qyer.com/avatar/002/25/77/30/200?v=1560226451",
        },
        {
          id: 2261566,
          title:
            "成都这家洞穴暗黑风咖啡厅酷毙了!早c晚A走起成都天气这么热咖啡*人必",
          avator: "https://pic.qyer.com/avatar/011/07/08/69/200?v=1572185180",
        },
        {
          id: 2261662,
          title:
            "【川西新龙-措卡湖】措卡湖，意为“乱石丛中的黑色海水”，神秘小众原汁原味。深",
          avator: "https://pic.qyer.com/avatar/009/88/48/58/200?v=1507386782",
        },
      ],
      userInfo: [
        {
          name: "张三",
          age: 20,
          sex: "男",
        },
      ],
    };
  },
};
</script>

<style scoped>
.active {
  font: 800 18px/40px "微软雅黑";
}
</style>
